<template>
  <s-page custom-class="Lazy-Page">
    <s-button type="primary" plain block @click="refreshList">换图</s-button>
    <view style="margin-top: 30rpx">
      <s-row :gutter="20" :gutter-y="20">
        <s-col v-for="(item, index) of list" :key="index" :span="12">
          <s-image
            :src="item"
            mode="aspectFill"
            lazy-load
            show-loading
            fade-show
            width="100%"
            height="340"
            radius="10"
          />
        </s-col>
      </s-row>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    list: [],
    scrollTop: 0,
  }),
  onPageScroll({ scrollTop }) {
    this.scrollTop = scrollTop;
  },
  onLoad() {
    this.refreshList();
  },
  methods: {
    refreshList() {
      const list = [];
      const images = [
        'https://img01.yzcdn.cn/vant/cat.jpeg',
        'https://img2.baidu.com/it/u=3206689113,2237998950&fm=26&fmt=auto&gp=0.jpg',
        'https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg',
        'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1070003001,653753576&fm=26&gp=0.jpg',
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1685320185,1992788721&fm=26&gp=0.jpg',
        'https://img01.yzcdn.cn/vant/cat.jpeg',
        'https://img2.baidu.com/it/u=3206689113,2237998950&fm=26&fmt=auto&gp=0.jpg',
      ].sort(() => Math.random() * 10 > 5 ? 1 : -1);
      for (let i = 0; i < 8; i++) {
        const v = Date.now() + i;
        list.push(...images.map(src => src + '?v=' + v));
      }
      this.list = list;
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: $white;
}
.Lazy-Page {
  padding: $padding-md;
}
</style>
